/*  This file contains the view model for Header widget
    on the login and post login screen.
*/
define([
  "ojs/ojcore",
  "knockout",
  "jquery",
  "../../model/header",
  "framework/js/constants/constants",
  "framework/js/constants/extensions",
  "text!../template/header-retail.html",
  "text!../template/wallet-header.html",
  "ojL10n!resources/nls/header",
  "platform",
  "ojs/ojavatar",
  "ojs/ojselectcombobox",
  "ojs/ojswitch"
], function (oj, ko, $, HeaderModel, Constants, Extensions, templateDefault, walletTemplate, resourceBundle, Platform) {
  "use strict";
  var vm = function (params) {
    var self = this;
    var language = sessionStorage.getItem("user-locale") || document.getElementsByTagName("html")[0].getAttribute("lang") || "vn";

    self.isChecked = ko.observable(language == 'en');
    self.menuNavigationAvailable = params.menuNavigationAvailable;
    self.loadedComponent = params.loadedComponent;
    self.toggleInner = params.toggleInner;
    self.resourceBundle = resourceBundle;
    self.isExternalPayment = self.isExternalPayment ? self.isExternalPayment : null;
    self.module = Constants.module;
    self.userSegment = Constants.userSegment;
    self.unreadmailCount = ko.observable(0);
    self.unreadAlertCount = ko.observable(0);
    self.unreadNotificationCount = ko.observable(0);
    self.totalUnreadNotification = ko.observable(0);
    self.searchKeyword = ko.observableArray();
    self.searchTags = ko.observableArray();
    self.isSearchVisible = ko.observable(false);
    self.loadMiniMailBox = ko.observable(false);
    self.popupComponent = ko.observable(null);
    self.avtSrc = ko.observable();
    self.avatarSize = ko.observable("sm");
    self.funcName = ko.observable("");
    self.loginSuccess = ko.observable(false);
    self.showMoreMenu = function () {
      var h = $('header').height();

      if (!$('#moreMenuDiv').is(":visible")) {
        $('#moreMenuDiv').css({
          top: h
        });
        $('#moreMenuDiv').show(100);
      } else {
        $('#moreMenuDiv').hide(100);
      }

    }

    self.isChecked.subscribe(function (v) {
      if (!v) {
        //vn
        params.baseModel.setLocale('vn');
      } else {
        params.baseModel.setLocale('en');
      }
    });

    self.showCheckList = function () {
      $('.iconDelete').css({
        display: 'inline'
      });
      $('.iconDelete').toggleClass();
      params.dashboard.isUnDeletingAvailable(true);
      params.dashboard.isDeletingAvailable(false);
    }

    self.afterRenderCompTitle = function () {
      $('.comp-title').css({
        paddingLeft: $('header').width() * 0.22
      });
    }

    if (params.baseModel.small() && self.userSegment === 'CORP') {
      params.baseModel.registerComponent('account-reports', 'widgets/corporateDashboard');
    }

    self.styleHeaderSCB = function () {
      let objStyle = {};
      let module = params.baseModel.QueryParams.get('module');

      if (!params.baseModel.large()) {
        if (params.dashboard.userData.userProfile || (self.userSegment != 'ANON')) {
          objStyle = {
            background: '#0066B2',
            backgroundSize: 'cover',
            display: 'block'
          };
        }
      }

      return objStyle;
    };

    self.styleFixedHeader = function () {
      let objStyle = {
        background: '#0066B2'
      };
      if (params.baseModel.large()) {

      }
      if (params.baseModel.cordovaDevice()) {
        objStyle.paddingTop = '12px';
        if (window.device.model.includes('iPhone10')) {
          objStyle.paddingTop = '35px'
        }
      } else if (params.baseModel.large()) {
        // objStyle.background = 'linear-gradient(rgb(0,0,0,0.1), rgb(0,0,0,0.8))';
        objStyle.background = 'url(../images/common/scb/header_bg.png)';
        objStyle.backgroundSize = 'cover';
        objStyle.backgroundRepeat = 'no-repeat';
      }

      return objStyle;
    }

    self.classLogo = ko.observable("");

    if (params.dashboard.userData.userProfile) {
      self.classLogo("center");
    } else {
      self.classLogo("left");
    }

    params.baseModel.registerComponent("search", "common");
    //params.baseModel.registerComponent("mini-mailbox", "mailbox");
    params.baseModel.registerComponent("notifications", "widgets");
    params.baseModel.registerComponent("locator", "atm-branch-locator");
    params.baseModel.registerElement(["floating-panel", "help"]);
    // params.baseModel.registerElement("more-menu");

    require(["ojs/ojpopup"], function () {
      self.popupComponent("ojPopup");
    });

    var menu, menuPosition, placeholder,
      isAdded;

    if (params.dashboard.userData.userProfile && params.rootModel.roles && params.rootModel.roles[0] != 'Administrator') {
      HeaderModel.getAvt().done(function (data) {
        self.avtSrc(data.profilePicture);
        // Dung merge
        if (data.isStaff && data.isStaff == 'Y') {
          params.dashboard.isStaff(true);
        }
      }).fail(function (data) {
        console.log("getAvt failture");
      });
    }
    /**
     * event icon Home
     */
    self.goDashboard = function () {
      //self.resetHeader();
      $('.header').css({
        //background: 'linear-gradient( rgba(0, 87, 255, 0.64), rgba(4, 0, 255, 0.25) ), url(./images/common/scbCover.png) no-repeat',
        background: '#0066B2',
        backgroundSize: 'cover',
        display: 'block'
      });
      params.dashboard.openDashBoard();
    }

		/**
		* This function refreshes the DOM nodes and header values and implements the on-screen back button functionality.
		* @function hideDetails
		*
		*/
    self.hideDetails = function () {
      self.isSearchVisible(false);
      params.dashboard.isHelpAvailable(false);

      if (params.baseModel.componentName) {
        if (params.baseModel.componentName == 'dashboard') {
          params.dashboard.openDashBoard();
        } else {
          var obj = {};

          if (params.baseModel.componentParams &&
            params.baseModel.componentParams.selectedItem) {
            obj.selectedItem = params.baseModel.componentParams.selectedItem;
          }

          params.dashboard.loadComponent(params.baseModel.componentName, obj, params.baseModel.componentParams);
        }
        if (params.baseModel.small()) {
          $('.header').css({
            background: '#0066B2',
            backgroundSize: 'cover',
            display: 'block'
          });
        }
      } else {
        // var length = params.dashboard.breadcrumbs().length;

        // if(length > 1){
        // var label;

        // for(var j = 0; j < length; j++){
        // label = params.dashboard.breadcrumbs().pop().label;

        // if(!label.includes('review') || !label.includes('result')){
        // label = params.dashboard.breadcrumbs().pop().label
        // break;
        // }
        // }
        // params.dashboard.loadComponent(label, {}, self);
        // } else {
        // history.back();
        // }
        history.back();
      }
    };

    /**
     * reset header state when go home
     */
    self.resetHeader = function () {
      $('.fixed-header-container').css({
        "box-shadow": '0 3px 6px 0 rgba(0, 0, 0, 0.2)',
        height: '4.375rem'
      })
      $('.header').css("display", "block");
      $('.main-content').css({
        padding: '0px 0.75rem;'
      })
    }
    self.openMailBox = function () {
      // var isOpen = $("#popup1").ojPopup("isOpen");
      // if (isOpen) {
      // $("#popup1").ojPopup("close", "#mailbox-holder");
      // } else {
      // self.loadMiniMailBox(false);
      // ko.tasks.runEarly();
      // $("#popup1_wrapper_layer").show();
      // $("#popup1").ojPopup("open", "#mailbox-holder", {
      // "my": {
      // "horizontal": "right",
      // "vertical": "top"
      // },
      // "at": {
      // "horizontal": "end",
      // "vertical": "bottom"
      // }
      // });
      // self.loadMiniMailBox(true);
      // $('#popup1_focusSkipLink').remove();
      // }
      params.dashboard.loadComponent('notifications', {}, self, true);
    };
    self.showHeaderMenu = ko.observable(false);
    self.showInformation = function () {
      if (params.dashboard.isHelpAvailable()) {
        $("#informationPopupHeader").trigger("openFloatingPanel");
      }
    };
    /**
     * enable search Bar
     */
    self.showSearchBar = function () {
      self.searchKeyword(null);
      self.isSearchVisible(true);
      ko.tasks.runEarly();
      $(".nav-menu .oj-inputsearch-input").focus();
      $(".oj-inputsearch-search-button").css("display", "none");
    };

    self.searchKeyword.subscribe(function (newValue) {
      if (newValue) {
        var selectedValue;
        try {
          selectedValue = JSON.parse(newValue);
        } catch (e) {
          return;
        }
        params.menuOptionSelect(selectedValue);
        self.isSearchVisible(false);
      }
    });

    var isNavabarShown = false;

    self.toggleSearchingMenu = function () {
      if (!isNavabarShown) {
        $.when($('#navbar').fadeOut(200)).then(function () {
          // $('.scb-header-search-box').fadeIn(50);
          $('.scb-header-search-box').animate({
            width: "toggle"
          });
          $('.oj-inputsearch-input').focus();
          isNavabarShown = true;
        });
      } else {
        $.when($('.scb-header-search-box').fadeOut(200)).then(function () {
          $('#navbar').fadeIn(50);
          isNavabarShown = false;
        });
      }
    }

    $("body").click(function (e) {
      if (e.target.className !== "oj-inputsearch-input oj-inputsearch-focused" && e.target.className !== "icons icon-search color-white" && isNavabarShown &&
        e.target.className !== "material-icons sm-32 icons-scb") {
        self.isSearchVisible(false);
        self.toggleSearchingMenu();
      }
    })
    self.login = function () {
      if (Constants.authenticator === "OBDXAuthenticator") {
        params.baseModel.switchPage({
          module: "login"
        }, false);
      } else {
        params.baseModel.switchPage({}, true);
      }
    };

    function flattenMenuArray(array, parent) {
      var result = [];
      array.forEach(function (element) {
        if (Array.isArray(element.submenus)) {
          result = result.concat(flattenMenuArray(element.submenus, element.name));
        } else {
          element.parent = parent;
          result.push(element);
        }
      });
      return result;
    }

    self.logout = function () {
      window.onbeforeunload = null;
      if (Constants.authenticator === "OBDXAuthenticator") {
        HeaderModel.logOutDBAuth();
      } else {
        HeaderModel.logOut(function () {
          Platform.getInstance().then(function (platform) {
            platform("logOut");
          });
        });
      }
    };

    var getMailCount = function () {
      HeaderModel.getMailCount().done(function (data) {
        self.unreadmailCount(data.summary.items[0].unReadCount);
        self.unreadAlertCount(data.summary.items[1].unReadCount);
        self.unreadNotificationCount(data.summary.items[2].unReadCount);
        self.totalUnreadNotification(self.unreadmailCount() + self.unreadAlertCount() + self.unreadNotificationCount());
      });
    };
    params.rootModel.userInfoPromise.then(function () {
      ko.utils.extend(self, params.rootModel);
      self.userSegment = Constants.userSegment;
      if (params.dashboard.userData.userProfile) {
        self.loginSuccess(true);
        getMailCount();
      } else {
        self.loginSuccess(false);
      }
      require.undef("json!menu");
      require(["json!menu", "ojL10n!resources/nls/menu"], function (MenuJSON, MenuLocale) {
        var menus;
        if (MenuJSON.menus[params.baseModel.getDeviceSize()]) {
          menus = MenuJSON.menus[params.baseModel.getDeviceSize()];
        }
        if (!menus) {
          menus = MenuJSON.menus.default;
        }
        var output = flattenMenuArray(menus).map(function (element) {
          return {
            value: JSON.stringify(element),
            label: params.baseModel.format("{selection}", {
              selection: MenuLocale.menu.groups[element.name]
            })
          };
        });
        self.searchTags(output);
      });

      // Dung merge

      self.showHeaderMenu(true);
    });
    self.showHeaderMenu.subscribe(function (newValue) {
      if (!newValue) {
        getMailCount();
        self.showHeaderMenu(true);
      }
    });
    var setoffset = function () {
      menu = document.querySelector(".fixed-header");
      if (placeholder && isAdded) {
        menu.parentNode.removeChild(placeholder);
        menu.classList.remove("sticky");
      }
      placeholder = document.createElement("div");
      isAdded = false;
    };
    $(window).scroll(function () {
      var y = $(this).scrollTop();
      if (y >= 60) {
        $(".header-container").addClass("shadow");
      } else {
        $(".header-container").removeClass("shadow");
      }
      menuPosition = menu.getBoundingClientRect();
      if (window.pageYOffset >= menuPosition.top && !isAdded) {
        placeholder.style.width = menuPosition.width + "px";
        placeholder.style.height = menuPosition.height + "px";
        menu.classList.add("sticky");
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
      } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove("sticky");
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
      }
    });
    self.resetModalComponent = function () {
      params.dashboard.modalComponent("");
    };
    $(document).keyup(function (event) {
      if (event.keyCode === 80 && event.altKey) {
        event.preventDefault();
        $("a[openProfile=\"true\"]")[0].click();
      }
    });

    var resizeHandler = ko.computed(function () {
      if (params.baseModel.large() ^ params.baseModel.medium() ^ params.baseModel.small()) {
        setoffset();
      }
    });
    self.dispose = function () {
      resizeHandler.dispose();
    };
    self.menuHeight = $(window).height() + "px";
    params.dashboard.isLoadAvatar(false);
  },
    template = templateDefault;
  if (Constants.module === "WALLET" && Constants.userSegment !== "ADMIN") {
    template = walletTemplate;
  }
  return {
    viewModel: vm,
    template: template
  };
});